<template>
	<div class="querydetailedhigh">
		<div style="margin:20px 20px 20px 20px;background-color: #f5f5f5;padding: 20px;">
			<!--<Row >
		        <Col span="24" style="text-align: left;">
					<span style="font-size: 18px;color: #1a1a1a;font-weight: 540;">考试名称：{{analysisName}}</span>
				</Col>
			</Row>-->
			<Row >
		        <Col span="24" style="text-align: left;">
					<span style="font-size: 18px;color: #1a1a1a;font-weight: 540;">考试名称:{{examName}}</span>
				</Col>
			</Row>
			<Row style="margin:15px 0px 0px 0px;color: #666666;">
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">入学年份：{{enrolYear}}</span>
				</Col>
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">学年：{{schoolYear}}</span>
				</Col>
		        <Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">年级：{{gradeName}}</span>
				</Col>
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">班级：{{className}}</span>
				</Col>
			</Row>
			<Row style="color: #666666;margin-top:5px;">
		        <Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">考试时间：{{examDate}}</span>
				</Col>
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">学号：{{studentNo}}</span>
				</Col>
				<Col span="6" style="text-align: left;">
					<span style="font-size: 16px;">姓名：{{studentName}}</span>
				</Col>
			</Row>
		</div>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
    			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
    			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">各科成绩</span>
			</Col>
		</Row >
		<div>
			<Row style="margin:0 auto;margin-left:20px;margin-right:20px;margin-top:20px;margin-bottom:5px;color: #666666;border-radius: 12px;background-color: #f0f8ff;">
		        <Col span="4" style="text-align: center;">
					<span style="font-size: 16px;">科目</span>
				</Col>
				<Col span="5" >
					<Row>
						<Col span="12" style="text-align: right;font-size: 16px;">
							考试分&nbsp;|
						</Col>
						<Col span="12" style="text-align: left;font-size: 16px;">
							&nbsp;等级
						</Col>
					</Row>
				</Col>
				<Col span="5" style="text-align: center;">
					<Row>
						<Col span="12" style="text-align: right;font-size: 16px;">
							班级&nbsp;|
						</Col>
						<Col span="12" style="text-align: left;font-size: 16px;">
							&nbsp;年级
						</Col>
					</Row>
				</Col>
				<Col span="5" style="text-align: center;">
					<Row>
						<Col span="12" style="text-align: right;font-size: 16px;">
							班级平均分&nbsp;|
						</Col>
						<Col span="12" style="text-align: left;font-size: 16px;">
							&nbsp;班级最高分
						</Col>
					</Row>
				</Col>
				<Col span="5" style="text-align: center;">
					<Row>
						<Col span="12" style="text-align: right;font-size: 16px;">
							年级平均分&nbsp;|
						</Col>
						<Col span="12" style="text-align: left;font-size: 16px;">
							&nbsp;年级最高分
						</Col>
					</Row>
				</Col>
			</Row>
			<Row class="hoverclass" v-for="item in sutdentResult" :key="item.subjectName" style="margin:0 auto;color: #666666;margin: 5px 20px 5px 20px;padding:5px 0px 5px 0px;border-bottom: 1px solid rgb(240, 248, 255);">
		        <Col span="4" style="text-align: center;">
					<span style="font-size: 16px;">{{item.subjectName}}</span>
				</Col>
				<Col span="5" style="text-align: center;">
					<Row>
						<Col span="12" style="text-align: right;font-size: 16px;">
							{{item.result}}&nbsp;&nbsp;|
						</Col>
						<Col span="12" style="text-align: left;font-size: 16px;">
							&nbsp;&nbsp;{{item.level}}
						</Col>
					</Row>
				</Col>
				<Col span="5" style="text-align: center;">
					<Row>
						<Col span="12" style="text-align: right;font-size: 16px;">
							{{item.classesRanking}}&nbsp;&nbsp;|
						</Col>
						<Col span="12" style="text-align: left;font-size: 16px;">
							&nbsp;&nbsp;{{item.gradeRanking}}
						</Col>
					</Row>
				</Col>
				<Col span="5" style="text-align: center;">
					<Row>
						<Col span="12" style="text-align: right;font-size: 16px;">
							{{item.classesAverage}}&nbsp;&nbsp;|
						</Col>
						<Col span="12" style="text-align: left;font-size: 16px;">
							&nbsp;&nbsp;{{item.classesMaxResult}}
						</Col>
					</Row>
				</Col>
				<Col span="5" style="text-align: center;">
					<Row>
						<Col span="12" style="text-align: right;font-size: 16px;">
							{{item.gradeAverage}}&nbsp;&nbsp;|
						</Col>
						<Col span="12" style="text-align: left;font-size: 16px;">
							&nbsp;&nbsp;{{item.gradeMaxResult}}
						</Col>
					</Row>
				</Col>
			</Row>
		</div>
		
		
		<div class="dataanalysis">
	    	<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
	    	<Row style="text-align: left;margin-top: 41px;">
				<Col span="12" style="text-align: left;">
	    			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
	    			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">本学年各科成绩趋势图</span>
				</Col>
				<!--<Col span="11" style="text-align: right;">
		        	<Select style="width:80px;text-align: center;" v-model="subjectselect" type="button" @on-change="changeselect">
		        		<Option v-for="item in subjectlist" :key="item.value" :value="item.value">{{item.label}}</Option>
				    </Select>
		       </Col>-->
			</Row >
		    <Row style="text-align: left;margin-top: 0px;padding-bottom: 20px;">
				<div>
	    			<!--<p style="font-size: 16px;font-weight: 600;margin-left: 45px;text-align: left;">语文科：</p>-->
	    		</div>
				<div id="myChart" ref="line_subject" :style="{width: '95%', height: '450px',margin:'0 auto'}"></div>
			</Row >
			
			<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
			<Row style="text-align: left;margin-top: 41px;">
				<Col span="12" style="text-align: left;">
	    			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
	    			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">本学年成绩排名趋势图</span>
				</Col>
				<Col span="11" style="text-align: right;">
    				<ButtonGroup>
				        <Button v-bind:class="[resultType == 'class'?buttonActiveClass:'']" @click="toggleLine('class')">班级</Button>
				        <Button v-bind:class="[resultType == 'grade'?buttonActiveClass:'']" @click="toggleLine('grade')">年级</Button>
				    </ButtonGroup>
		       </Col>
			</Row >
		    <Row style="text-align: left;margin-top: 0px;padding-bottom: 20px;">
				<div>
	    			<!--<p style="font-size: 16px;font-weight: 600;margin-left: 45px;text-align: left;">语文科：</p>-->
	    		</div>
				<div id="myChart" ref="line_result" :style="{width: '95%', height: '450px',margin:'0 auto'}"></div>
			</Row >
			
			
	    </div>
	</div>
</template>

<script>
	import { getsessionstorage } from '@/components/js/Localstorage'
	import api from "@/components/js/Apidomain.js"
	export default{
		
		data(){
			return{
				examName:"",
				enrolYear:"",
				schoolYear:"",
				gradeName:"",
				examDate:"",
				
				className:"",
				studentNo:"",
				studentName:"",
				
				analysisId:"",
				studentId:"",
				schoolYear:"",
				
				resultType:"class",
				
				linedata_subject:{
				    title: {
				        text: '',
				        textStyle:{
				        	fontSize:"15",
				        }
				    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
//				        data:['邮件营销','联盟广告','视频广告'],
//						selectedMode: 'single',		//多选单选模式
				    },
				    grid: {
				        left: '2%',
				        right: '2%',
				        bottom: '2%',
				        top:'15%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: "",
//				        data: ['周一','周二','周三','周四','周五','周六','周日']
						axisTick: {
			                alignWithLabel: true
			            },
			            axisLabel: {
                                            interval: 0,
                                            formatter:function(value)
                                            {
                                                
                                                var ret = "";//拼接加\n返回的类目项
                                                var maxLength = 6;//每项显示文字个数
                                                var valLength = value.length;//X轴类目项的文字个数
                                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                                if (rowN > 1)//如果类目项的文字大于3,
                                                {
                                                    for (var i = 0; i < rowN; i++) {
                                                        var temp = "";//每次截取的字符串
                                                        var start = i * maxLength;//开始截取的位置
                                                        var end = start + maxLength;//结束截取的位置
                                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                                        temp = value.substring(start, end) + "\n";
                                                        ret += temp; //凭借最终的字符串
                                                    }
                                                    return ret;
                                                }
                                                else {
                                                    return value;
                                                }
                                            }
                                        }

				    },
				    yAxis: {
				        type: 'value',
				        min: function(value) {
						    return parseInt(value.min) ;
						}
				    },
				    series: [
//				    	{
//				            name:'邮件营销',
//				            type:'line',
//				            data:[120, 132, 101, 134, 90, 230, 210]
//				       },
				    ]
				},
				linedata_result:{
				    title: {
				        text: '',
				        textStyle:{
				        	fontSize:"15",
				        }
				    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
//				        data:['邮件营销','联盟广告','视频广告'],
//						selectedMode: 'single',		//多选单选模式
				    },
				    grid: {
				        left: '2%',
				        right: '2%',
				        bottom: '2%',
				        top:'15%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: "",
//				        data: ['周一','周二','周三','周四','周五','周六','周日']
						axisTick: {
			                alignWithLabel: true
			            },
			            axisLabel: {
                                            interval: 0,
                                            formatter:function(value)
                                            {
                                                
                                                var ret = "";//拼接加\n返回的类目项
                                                var maxLength = 6;//每项显示文字个数
                                                var valLength = value.length;//X轴类目项的文字个数
                                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                                if (rowN > 1)//如果类目项的文字大于3,
                                                {
                                                    for (var i = 0; i < rowN; i++) {
                                                        var temp = "";//每次截取的字符串
                                                        var start = i * maxLength;//开始截取的位置
                                                        var end = start + maxLength;//结束截取的位置
                                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                                        temp = value.substring(start, end) + "\n";
                                                        ret += temp; //凭借最终的字符串
                                                    }
                                                    return ret;
                                                }
                                                else {
                                                    return value;
                                                }
                                            }
                                        }

				    },
				    yAxis: {
				        type: 'value',
				        min: function(value) {
						    return parseInt(value.min) ;
						}
				    },
				    series: [
//				    	{
//				            name:'邮件营销',
//				            type:'line',
//				            data:[120, 132, 101, 134, 90, 230, 210]
//				       },
				    ]
				},
				sutdentResult:[]
			}
		},
		computed:{
			buttonActiveClass: function() {
				return 'active'
			},
        },
		created(){
			this.examName = getsessionstorage('quality_high_examName')
			this.enrolYear = getsessionstorage('quality_high_enrolYear')
			this.schoolYear = getsessionstorage('quality_high_schoolYear')
			this.gradeName = getsessionstorage('quality_high_gradeName')
			this.examDate = getsessionstorage('quality_high_examDate')
			
			this.analysisId = getsessionstorage('quality_high_student_analysisId')
			this.studentId = getsessionstorage('quality_high_student_studentId')
			this.schoolYear = getsessionstorage('quality_high_studyYearSelect')
			this.className = getsessionstorage('quality_high_student_className')
			this.studentNo = getsessionstorage('quality_high_student_studentNo')
			this.studentName = getsessionstorage('quality_high_student_studentName')
			this.getStudentResultdata()
			this.getLineSubjectdata()
			this.getLineResultdata()
			
		},
		methods:{
			toggleLine:function(type){
        		if(type == "class"){
        			this.resultType = "class"
        			this.getLineResultdata()
//      			this.drawLine()
        		}else if(type == "grade"){
        			this.resultType = "grade"
        			this.getLineResultdata()
//      			this.drawLine()
        		}
        		
        	},
			drawLine_subject() {
        		this.$nextTick(function () {
	                let myChart = this.$echarts.init(this.$refs.line_subject,'hengyi')
	                myChart.clear();
	                myChart.setOption(this.linedata_subject);
                })
           	},
           	drawLine_result() {
        		this.$nextTick(function () {
	                let myChart = this.$echarts.init(this.$refs.line_result,'hengyi')
	                myChart.clear();
	                myChart.setOption(this.linedata_result);
                })
           	},
           	//获取折线图数据
			getLineSubjectdata:function(){
//				this.chartshow = true;
				let roleId = getsessionstorage("roleid");
				var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysisExamDetail/getStudentSubjectScorePicture';
            	this.$http.post(url, {"roleId":roleId,"schoolYearStart":this.schoolYear,"analysisId":this.analysisId,"studentId":this.studentId}).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						self.linedata_subject.xAxis.data = response.data.data.result;
						self.linedata_subject.series = response.data.data.result_data; 
						//$nexttick为了使tch = true生效（dom）变化后再执行drawline，这样才不会有报错误
						self.$nextTick(function () {
							self.drawLine_subject()
						})
	            }else if(response.data.success == false){
	            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
	            	}
				})
				.catch(function(error) {
					self.$Message.error({
							content: '系统发生错误：错误码00255',
							duration: 10,
							closable: true
						});
				});
			},
			getLineResultdata:function(){
//				this.chartshow = true;
				let roleId = getsessionstorage("roleid");
				var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysisExamDetail/getStudentSubjectRankingPicture';
            	this.$http.post(url, {"roleId":roleId,"schoolYearStart":this.schoolYear,"analysisId":this.analysisId,"studentId":this.studentId,"type":this.resultType}).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						self.linedata_result.xAxis.data = response.data.data.result;
						self.linedata_result.series = response.data.data.data; 
						//$nexttick为了使tch = true生效（dom）变化后再执行drawline，这样才不会有报错误
						self.$nextTick(function () {
							self.drawLine_result()
						})
	            }else if(response.data.success == false){
	            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
	            	}
				})
				.catch(function(error) {
					self.$Message.error({
							content: '系统发生错误：错误码00256',
							duration: 10,
							closable: true
						});
				});
			},
//			获取学生各科成绩
			getStudentResultdata:function(){
				let roleId = getsessionstorage("roleid");
				var self = this;
            	let url = api.apidomain+'/tqes/web/squaAnalysisExamDetail/getStudentSubjectDetail';
            	this.$http.post(url, {"roleId":roleId,"schoolYearStart":this.schoolYear,"analysisId":this.analysisId,"studentId":this.studentId}).then(function(response) {
					if(response.data.success == true){
//						console.log(response.data.data)
						self.sutdentResult = response.data.data
	            }else if(response.data.success == false){
	            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
	            	}
				})
				.catch(function(error) {
					self.$Message.error({
							content: '系统发生错误：错误码00257',
							duration: 10,
							closable: true
						});
				});
			},
		},
		
	}
</script>

<style lang="css" scoped>
	.querydetailedhigh >>> .alicon-back_android_light{
		margin-top:4px;
	}
	.querydetailedhigh >>> .hoverclass:hover{
		background-color:rgb(245, 245, 245);
	}
	.querydetailedhigh >>> .active{
		background-color: #517EDB !important;
		color: white !important;
	}
</style>